@charset "utf-8";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
.round{
   border-radius: 50%; 
   position: absolute;
   left: 50%;
   top: 50%;
}
.roundMini{
    border-radius: 50%;
    position: absolute;
    width: r(40);
    height: r(40);
    transform-origin: center;
    opacity: 0;
    background: rgb(255, 213, 41);
}
#web{
    .active{
        .round1{
            animation: page1_round 0.8s ease-in 0.4s  forwards;
        }
        .round2{
            animation: page1_round 0.8s ease-in 0.5s  forwards;
        }
        .round3{
            animation: page1_round 0.8s ease-in 0.4s  forwards;
        }
        .round4{
            animation: page1_round 0.8s ease-in 0.4s  forwards;
        }
        .round5{
            animation: page1_round 0.8s ease-in 0.5s  forwards;
        }
        .round6{
            animation: page1_round 0.8s ease-in 0s  forwards;
        }
        .page1_p11{
            animation: page1_p11 0.7s linear 0.6s  forwards;
        }
        .page1_p10{
            animation: page1_p10 0.7s linear 0.8s  forwards;
        }
        .page1_p5{
            animation: page1_p5 0.5s linear 1s  forwards;
        }
        .page1_p5_round{
            animation: page1_p5_round 0.5s linear 1s  forwards;
        }
        .page1_p3{
            animation: page1_p3 0.5s linear 1.2s  forwards;
        }
        .page1_p1{
            animation: page1_p1 0.5s linear 1.4s  forwards;
        }
        .page1_p2{
            animation: page1_p2 0.5s linear 1.8s  forwards;
        }
        .page1_p4{
            animation: page1_p4 0.5s linear 2s  forwards;
        }
        .page1_p4_round{
            animation: page1_p4_round 0.5s linear 2s  forwards;
        }
        .page1_p9{
            animation: page1_p9 0.5s linear 2.2s  forwards;
        }
        .page1_p4b{
            animation: page1_p4b 0.5s linear 2.4s  forwards;
        }
        .page1_h1{
            animation: page1_h1 0.5s linear 2.4s  forwards;
        }
        .page1_p6{
            animation: page1_p6 0.5s linear 2.6s  forwards;
        }
        .page1_p7{
            animation: page1_p7 0.5s linear 2.8s  forwards;
        }
        .page1_p8{
            animation: page1_p8 0.5s linear 3.0s  forwards;
        }
        .round1Mini{
            animation: roundMini 1s ease 2.0s  forwards infinite;
        }
        .round2Mini{
            animation: roundMini 1s ease 1.8s  forwards infinite;
        }
        .round3Mini{
            animation: roundMini 1s ease 2.2s  forwards infinite;
        }
        .round4Mini{
            animation: roundMini 1s ease 1.8s  forwards infinite;
        }
        .round5Mini{
            animation: roundMini 1s ease 2.0s  forwards infinite;
        }
        .round6Mini{
            animation: roundMini 1s ease 1.7s  forwards infinite;
        }
        .round7Mini{
            animation: roundMini 1s ease 2.1s  forwards infinite;
        }
        .round8Mini{
            animation: roundMini 1s ease 1.9s  forwards infinite;
        }
        .page2_p4{
            animation: page2_p4 0.8s linear 0.6s forwards;
        }
        .page2_p4_round{
            animation: page2_p4_round 0.8s linear 0.8s forwards;
        }
        .page2_p2{
            animation: page2_p2 0.8s linear 1s forwards;
        }
        .page2_p12{
            animation: page2_p12 0.8s linear 1.3s forwards;
        }
        .page2_p12_round{
            animation: page2_p12_round 0.8s linear 1.5s forwards;
        }
        .page2_head{
            animation: page2_head 0.8s linear 1.7s forwards;
        }
        .page2_content{
            animation: page2_content 0.8s linear 2s forwards;
        }
        .page2_timeOrWhere{
            animation: page2_timeOrWhere 0.8s linear 2.4s forwards;
        }
        .page2_warn{
            animation: page2_warn 0.8s linear 2.7s forwards;
        }
        .page3_p4{
            animation: page3_p4 0.8s linear 0.6s forwards;
        }
        .page3_p4_round{
            animation: page3_p4_round 0.8s linear 0.7s forwards;
        }
    }
    .page1{
        background: url(../images/page1_bg.jpg);
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        .round1{
            @extend .round;
            width: r(200);
            height: r(200);
            background: #54ce8e;
            margin-left: r(-100);
            margin-top: r(-100);
            z-index: 6;
            
            //animation: page1_round 0.8s ease-in 0.4s  forwards;
        }
        .round2{
            @extend .round;
            width: r(400);
            height: r(400);
            background: #a7d262;
            margin-left: r(-200);
            margin-top: r(-200);
            z-index: 5;
            
        }
        .round3{
            @extend .round;
            width: r(600);
            height: r(600);
            background: #fdefb7;
            margin-left: r(-300);
            margin-top: r(-300);
            z-index: 4;
            opacity: 0;
            
        }.round4{
            @extend .round;
            width: r(800);
            height: r(800);
            background: #bdebd6;
            margin-left: r(-400);
            margin-top: r(-400);
            z-index: 3;
            
        }
        .round5{
            @extend .round;
            width: r(1000);
            height: r(1000);
            background: #54ce8e;
            margin-left: r(-500);
            margin-top: r(-500);
            z-index: 2;
            
        }
        .round6{
            @extend .round;
            width: r(1200);
            height: r(1200);
            background: #a7d262;
            margin-left: r(-600);
            margin-top: r(-600);
            z-index: 1;
            
        }
        .page1_p11{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(182*2);
            height: r(185*2);
//          transform:translateX(50vw) translateY(72vh) rotateZ(0deg);
            transform:translateX(100vw) translateY(72vh) rotateZ(30deg);
            transform-origin: bottom left;
            opacity: 0;
            z-index: 11;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p10{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(165*2.0);
            height: r(212*2.0);
            transform: translateX(-5vw) translateY(72vh) rotateZ(30deg);
            transform-origin: bottom left;
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p5{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(155*2);
            height: r(155*2);
            transform-style: preserve-3d;
            transform: translateY(45vh) translateX(-20vw) rotateX(-90deg);//vh以屏幕的百分比计算
            transform-origin: bottom left;//设置原点为左上           
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p5_round{
            width: r(120*1.5);
            height: r(120*1.5);
            border-radius: 50%;
            background: rgb(255, 213, 41);
            position: absolute;
            transform-origin: bottom left;//设置原点为左上       
            z-index: 10;
            left: 0;
            top: 0;
            opacity: 0;
            transform: translateY(47vh) translateX(0vw) rotateX(-90deg);
        }
        .page1_p3{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(101*2);
            height: r(113*2);
            transform-style: preserve-3d;
            transform: translateY(25vh) translateX(-10vw) rotateX(-90deg);//vh以屏幕的百分比计算
            transform-origin: bottom left;//设置原点为左上            
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p1{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(175*2);
            height: r(172*2);
            transform: translateY(-10vh) translateX(-10vw) rotateZ(-70deg);//vh以屏幕的百分比计算
            transform-origin: bottom left;//设置原点为左下           
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p2{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(135*2);
            height: r(150*2);
            transform: translateY(-3vh) translateX(55vw) rotateZ(-80deg);
            transform-origin: bottom left;
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p4{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*3);
            height: r(174*3);
            transform-style: preserve-3d;
            transform: translateY(10vh) translateX(70vw) rotateX(-90deg);
            transform-origin: top left;//设置原点为左上            
            z-index: 10;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p4_round{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*1.5);
            height: r(180*1.5);
            border-radius: 50%;
            transform-style: preserve-3d;
            transform: translateY(22vh) translateX(70vw) rotateX(-90deg);
            transform-origin: top left;//设置原点为左上            
            z-index: 9;
            opacity: 0;
            background: rgb(255, 213, 41);
        }
        .page1_p9{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(89*2.5);
            height: r(94*2.5);
            transform-style: preserve-3d;
            transform: translateY(40vh) translateX(80vw) rotateX(-90deg);
            transform-origin: top left;//设置原点为左上            
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_p4b{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*2);
            height: r(174*2);
            transform-style: preserve-3d;
            transform: translateY(52vh) translateX(80vw) rotateX(-90deg);
            transform-origin: top left;//设置原点为左上            
            z-index: 11;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page1_h1{
            width: r(56*2);
            height: r(34*2);
            position: absolute;
            left: 50%;
            top: 20vh;
            margin-left: r(-56);
            margin-top: r(-34);
            transform-style: preserve-3d;
            transform:  rotateX(-90deg);
            transform-origin: top left;//设置原点为左上       
            z-index: 11;
            opacity: 0;
        }
        .page1_p6{
            width: r(67*3);
            height: r(64*3);
            position: absolute;
            left: 50%;
            top: 35vh;
            margin-left: r(-100);
            margin-top: r(-96);
            transform:  translateY(-10vh) rotateZ(-180deg);
            transform-origin: center;//设置原点为左上       
            z-index: 11;
            opacity: 0;
        }
        .page1_p7{
            width: r(59*3);
            height: r(69*3);
            position: absolute;
            left: 50%;
            top: 45vh;
            margin-left: r(-90);
            margin-top: r(-105);
            transform:  translateY(-10vh) rotateZ(-180deg);
            transform-origin: center;//设置原点为左上       
            z-index: 11;
            opacity: 0;
        }
        .page1_p8{
            width: r(59*3);
            height: r(58*3);
            position: absolute;
            left: 50%;
            top: 55vh;
            margin-left: r(-90);
            margin-top: r(-87);
            transform:  translateY(-10vh) rotateZ(-180deg);
            transform-origin: center;//设置原点为左上       
            z-index: 11;
            opacity: 0;
        }
        .round1Mini{
            @extend .roundMini;
            left: 40vw;
            top: 5vh;
        }
        .round2Mini{
            @extend .roundMini;
            left: 60vw;
            top: 10vh;
        }
        .round3Mini{
            @extend .roundMini;
            left: 30vw;
            top: 30vh;
        }
        .round4Mini{
            @extend .roundMini;
            left: 23vw;
            top: 40vh;
        }
        .round5Mini{
            @extend .roundMini;
            left: 70vw;
            top: 40vh;
        }
        .round6Mini{
            @extend .roundMini;
            left: 65vw;
            top: 50vh;
        }
        .round7Mini{
            @extend .roundMini;
            left: 40vw;
            top: 70vh;
        }
        .round8Mini{
            @extend .roundMini;
            left: 80vw;
            top: 70vh;
        }
    }
    .page2{
        background: url(../images/page1_bg.jpg);
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        .round1{
            @extend .round;
            width: r(200);
            height: r(200);
            background: #54ce8e;
            margin-left: r(-100);
            margin-top: r(-100);
            z-index: 6;
            
            //animation: page1_round 0.8s ease-in 0.4s  forwards;
        }
        .round2{
            @extend .round;
            width: r(400);
            height: r(400);
            background: #a7d262;
            margin-left: r(-200);
            margin-top: r(-200);
            z-index: 5;
            
        }
        .round3{
            @extend .round;
            width: r(600);
            height: r(600);
            background: #fdefb7;
            margin-left: r(-300);
            margin-top: r(-300);
            z-index: 4;
            opacity: 0;
            
        }.round4{
            @extend .round;
            width: r(800);
            height: r(800);
            background: #bdebd6;
            margin-left: r(-400);
            margin-top: r(-400);
            z-index: 3;
            
        }
        .round5{
            @extend .round;
            width: r(1000);
            height: r(1000);
            background: #54ce8e;
            margin-left: r(-500);
            margin-top: r(-500);
            z-index: 2;
            
        }
        .round6{
            @extend .round;
            width: r(1200);
            height: r(1200);
            background: #a7d262;
            margin-left: r(-600);
            margin-top: r(-600);
            z-index: 1;
            
        }
        .page2_p4_round{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*1.5);
            height: r(180*1.5);
            border-radius: 50%;
            transform-origin: center;//设置原点为左上            
            z-index: 9;
            opacity: 0;
            background: rgb(255, 213, 41);
        }
        .page2_p4{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*2);
            height: r(174*2);           
            transform-origin: center;//设置原点为左上            
            z-index: 10;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page2_p2{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(135*2);
            height: r(150*2);           
            transform-origin: center;//设置原点为左上            
            z-index: 10;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page2_p12{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(201*2);
            height: r(201*2);           
            transform-origin: center;//设置原点为左上            
            z-index: 10;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page2_p12_round{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*1.3);
            height: r(180*1.3);
            border-radius: 50%;
            transform-origin: center;//设置原点为左上            
            z-index: 9;
            opacity: 0;
            background: rgb(255, 213, 41);
            
        }
        .page2_head{
            color: #F57C3E;
            font-size: r(24*3);
            font-family: "fangzheng";
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top center;
            z-index: 10;
            opacity: 0;
        }
        .page2_content{
            position: absolute; 
            width: r(228*2);
            left: 0;
            top: 0;
            transform-origin: top center;
            opacity: 0;
            z-index: 10;
            p{
                font-size: r(14*2);
            }
        }
        .page2_timeOrWhere{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(228*2);
            transform-origin: top center;
            z-index: 10;
            opacity: 0;
            p{
                font-size: r(14*2);
            }
        }
        .page2_warn{
            position: absolute; 
            left: 0;
            top: 0;
            opacity: 0;
            width: r(228*2);
            transform-origin: top center;
            z-index: 10;
            p{
                font-size: r(14*2);
                line-height: r(23*2);
            }
        }
        .round1Mini{
            @extend .roundMini;
            left: 40vw;
            top: 10vh;
        }
        .round2Mini{
            @extend .roundMini;
            left: 95vw;
            top: 10vh;
        }
        .round3Mini{
            @extend .roundMini;
            left: 0vw;
            top: 30vh;
        }
        .round4Mini{
            @extend .roundMini;
            left: 17vw;
            top: 60vh;
        }
        .round5Mini{
            @extend .roundMini;
            left: 70vw;
            top: 40vh;
        }
        .round6Mini{
            @extend .roundMini;
            left: 50vw;
            top: 70vh;
        }
        .round7Mini{
            @extend .roundMini;
            left: 10vw;
            top: 95vh;
        }
        .round8Mini{
            @extend .roundMini;
            left: 80vw;
            top: 70vh;
        }
    }
    .page3{
        background: url(../images/page1_bg.jpg);
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        .round1{
            @extend .round;
            width: r(200);
            height: r(200);
            background: #54ce8e;
            margin-left: r(-100);
            margin-top: r(-100);
            z-index: 6;
            
            //animation: page1_round 0.8s ease-in 0.4s  forwards;
        }
        .round2{
            @extend .round;
            width: r(400);
            height: r(400);
            background: #a7d262;
            margin-left: r(-200);
            margin-top: r(-200);
            z-index: 5;
            
        }
        .round3{
            @extend .round;
            width: r(600);
            height: r(600);
            background: #fdefb7;
            margin-left: r(-300);
            margin-top: r(-300);
            z-index: 4;
            opacity: 0;
            
        }.round4{
            @extend .round;
            width: r(800);
            height: r(800);
            background: #bdebd6;
            margin-left: r(-400);
            margin-top: r(-400);
            z-index: 3;
            
        }
        .round5{
            @extend .round;
            width: r(1000);
            height: r(1000);
            background: #54ce8e;
            margin-left: r(-500);
            margin-top: r(-500);
            z-index: 2;
            
        }
        .round6{
            @extend .round;
            width: r(1200);
            height: r(1200);
            background: #a7d262;
            margin-left: r(-600);
            margin-top: r(-600);
            z-index: 1;
            
        }
        .page3_p4{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(180*2);
            height: r(174*2);
            transform-origin: top left;//设置原点为左上            
            z-index: 10;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .page3_p4_round{
            width: r(120*1.5);
            height: r(120*1.5);
            border-radius: 50%;
            background: rgb(255, 213, 41);
            position: absolute;
            transform-origin: top left;//设置原点为左上       
            z-index: 10;
            left: 0;
            top: 0;
            opacity: 0;
            
        }
        .page3_p12{
            position: absolute; 
            left: 0;
            top: 0;
            width: r(201*2);
            height: r(201*2);           
            transform-origin: center;//设置原点为左上            
            z-index: 10;
            opacity: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
        
    }
}
@font-face{
    font-family: fangzheng;
    src: url('../font/fangzheng.ttf');
}
